@import '../variables.css';

.container {
  position: relative;
  width: 100%;
}

.calendar {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #bcbcbc;
  padding: var(--gutter-static);
  box-shadow: var(--shadow);
  z-index: 9999;
}

.calendarInner {
  & td {
    vertical-align: middle;
  }

  & tbody tr {
    height: 38px;
  }

  & .dayButton {
    appearance: none;
    background: none;
    color: #333;
    text-decoration: none;
    text-align: center;
    padding: 4px;
    border: 2px solid transparent;
    width: 38px;
    height: 38px;
    cursor: pointer;

    &:hover {
      background-color: #eee;
    }

    &.muted {
      color: var(--color-fill-disabled);
    }

    &.today {
      background: color(#106c9e tint(80%));
    }

    &.excluded {
      color: var(--color-text-p2) !important;
      background: #dedede;
      cursor: default;
      pointer-events: none;
    }

    &.selected {
      background: #106c9e !important;
      color: #fff;
      transition: all 0.2s;

      &:hover {
        background-color: #0c577f;
      }

      &.cursor {
        color: #fff;
      }
    }

    &.cursor {
      border: 2px solid #666;
      color: #333;
    }
  }
}

.selectedMonth {
  display: block;
  text-align: center;
  font-size: var(--font-size-small);
}

.nav {
  display: block;
  text-decoration: none;
  appearance: none;
  background: none;
  border: 0;
  text-align: center;
  color: #333;
  border-radius: var(--radius);
  padding: 0.25rem 0;

  &:hover {
    background: #eee;
  }
}

.weekday {
  font-size: var(--font-size-medium);
  text-align: center;
}
